<template>
    <view class="content">
        <view class="text-area">
            <view class="imageBox" v-for="(item, index) in list" :key="index" @click="imageClick(item)">
                <view class="img">
                    <image :src="item.cover" style="width: 100%; height: 100%;"></image>
                </view>
                <view class="text_right">
                    <view class="title">{{ item.actName }}</view>
                    <view class="text1">{{ item.actLocation }}</view>
                    <view class="text2">{{ item.actTime + '~' + item.endTime }}</view>
                    <view class="text3">
                        <text>己报名人数:</text>
                        {{ item.signNumber }}/{{ item.numberLimit }}
                    </view>
                    <view class="text4">
                        <text class="jiage">￥{{ item.price }}</text> 起
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { onShow } from "@dcloudio/uni-app";
import { getCollectList } from '@/api/swiper'
const list = ref();
const serch = ref();
//搜索框
const doSearch = () => {

}
// 获取列表数据
const queryList = async () => {
    const { data, code } = await getCollectList({ pageSize: '10', pageNum: '1', type: 'ACTIVE' });
    if (code !== 200) return
    list.value = data.records
    list.value.map((item: { cover: string, actTime: string, endTime: string }) => {
        item.cover = 'https://hunlianjiaxiao.cn/img/love/' + item.cover
        item.actTime = item.actTime.substring(5, 16);
        item.endTime = item.endTime.substring(5, 16);
    })
}
// 点击图片跳转
const imageClick = (item: {}) => {
    uni.navigateTo({
        url: `/pages/swiper/eventDetails?data=` + encodeURIComponent(JSON.stringify(item)),
    });
}
onShow(() => {
    queryList();
});
</script>
<style>
.u-input__content {
    margin-top: 8rpx;
    padding: 0 20rpx;
}
</style>
<style lang="scss">
.content {
    height: 100vh;
}

.u-nav-slot {
    position: absolute;
    top: 65rpx;
    left: 30rpx;
    z-index: 100;
    z-index: 100;
}

.text-area {
    padding: 20rpx;
    border-radius: 20rpx 20rpx 0 0;

    .imageBox {
        margin: 20rpx auto;
        height: 200rpx;
        width: 680rpx;
        overflow: hidden;
        display: flex;
        padding: 20rpx;
        background-color: #fff;
        border-radius: 20rpx;

        .img {
            height: 200rpx;
            width: 180rpx;
        }

        .text_right {
            margin-left: 40rpx;
            position: relative;

            .title {
                font-weight: 700;
            }

            .text1 {
                font-size: 14px;
                margin-top: 10rpx;
                color: #8a8a8a;
            }

            .text2 {
                font-size: 14px;
                color: #8a8a8a;

            }

            .text3 {
                font-size: 14px;
                color: #eccda4;
            }

            .text4 {
                font-size: 14px;
                margin-top: 10rpx;
                position: absolute;
                right: -130rpx;

                .jiage {
                    font-size: 16px;
                    color: #FD6585;
                    font-weight: 600;
                }
            }
        }
    }
}

.content_top {
    background-image: linear-gradient(to bottom, #eb97b0, #faf5f6);
    height: 100rpx;
    padding-top: 130rpx;
    display: flex;

    .serch {
        width: 600rpx;
        height: 65rpx;
        background: rgba(94, 115, 167, 0.07);
        opacity: 1;
        border: 2rpx solid #d1deff;
        margin: 0 auto;
        border-radius: 30rpx;
    }
}

.guanzhu {
    margin-right: 20rpx;

    .guanzhufont {
        font-size: 12px;
    }
}

.plus {
    position: fixed;
    right: 20rpx;
    bottom: 20rpx;
    width: 80rpx;
    height: 80rpx;
    z-index: 2;
    /* 设置圆角 */
    border-radius: 50%;
    /* 设置边框及颜色 */
    /* 设置背景底色 */
    background-color: #eb97b0;
}

.plus::before {
    content: "";
    /* 使用绝对定位*/
    position: absolute;
    /* 通过left、top设置居中 */
    left: 50%;
    top: 80rpx;
    /* 左右长度 */
    width: 40rpx;
    margin-left: -20rpx;
    margin-top: -43rpx;
    /* 横线厚度 */
    border-top: 7rpx solid;
    /* 颜色 */
    color: #fff;
}

.plus::after {
    content: "";
    /* 使用绝对定位*/
    position: absolute;
    /* 通过left、top设置居中 */
    left: 80rpx;
    top: 50%;
    /* 竖线高度 */
    height: 40rpx;
    margin-left: -43rpx;
    margin-top: -20rpx;
    /* 横线厚度 */
    border-left: 7rpx solid;
    /* 颜色 */
    color: #fff;
}
</style>
  